<template>
	<view class="page">
		<v-header title="新建预约" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<view class="tip f vfs">
				<view class="borderleft"></view>
				您可以通过下面的方式联系我们，请留下您的联系信息及需要咨询的内容，我们将有专人与您进行联系，竭诚为您服务。
			</view>
			<view class="loginBox martop40">
				<view class="f cell">
					<label class="label">
						<text class="requierText">*</text>
						企业/团队名称:
					</label>
					<input class="fl" type="text" v-model="addquery.name" placeholder="请输入企业/团队名称" maxlength="30" />
				</view>
				<view class="f cell textAreaCell ">
					<label class="label">
						<text class="requierText">*</text>
						咨询内容:
					</label>
					<textarea class="fl textA" value="" placeholder="请输入咨询内容" v-model="addquery.content" />
				</view>
				<view class="f cell">
					<label class="label">
						<text class="requierText">*</text>
						联系人:
					</label>
					<input class="fl" type="text" v-model="addquery.username" placeholder="请输入联系人" maxlength="30" />
				</view>
				<view class="f cell">
					<label class="label">
						<text class="requierText">*</text>
						联系电话:
					</label>
					<input class="fl" type="text" v-model="addquery.phone" placeholder="请输入联系电话" maxlength="30" />
				</view>

				<view class="f cell">
					<label class="label">
						<text class="requierText">*</text>
						预约时间:
					</label>
					<picker class="picker" mode="date" :value="addquery.inspectionTime" @change="selectChange($event, 'jcTime')">
						<input type="text" v-model="addquery.inspectionTime" disabled placeholder="请选择预约时间" />
					</picker>
				</view>
				<view class="cu-btn block round login" @click="saveInfo">提交预约</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			h: this.$h,
			//新建预约参数
			addquery: {
				phone: '',
				content: '',
				name: '',
				inspectionTime: '',
				username: ''
			}
		};
	},
	methods: {
		//预约时间
		selectChange(e, type) {
			let than = this;
			let index = e.target.value;
			if (type == 'jcTime') {
				//检查时间
				than.addquery.inspectionTime = e.target.value;
			}
		},
		//保存信息
		saveInfo() {
			let than = this;
			let phone = than.addquery.phone || '';
			let content = than.addquery.content || '';
			let name = than.addquery.name || '';
			let username = than.addquery.username || '';
			let inspectionTime = than.addquery.inspectionTime || '';
			var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
			if (!name || name == '') {
				uni.showToast({
					title: '请输入企业/团队名称',
					icon: 'none'
				});
				return false;
			} else if (!content || content == '') {
				uni.showToast({
					title: '请输入咨询内容',
					icon: 'none'
				});
				return false;
			} else if (!username || username == '') {
				uni.showToast({
					title: '请输入联系人',
					icon: 'none'
				});
				return false;
			} else if (!phone || phone == '') {
				uni.showToast({
					title: '请输入联系电话',
					icon: 'none'
				});
				return false;
			} else if (phone.length != 11) {
				uni.showToast({
					title: '请输入有效的联系电话',
					icon: 'none'
				});
				return false;
			} else if (!myreg.test(phone)) {
				uni.showToast({
					title: '请输入有效的联系电话',
					icon: 'none'
				});
				return false;
			} else if (!inspectionTime || inspectionTime == '') {
				uni.showToast({
					title: '请选择预约时间',
					icon: 'none'
				});
				return false;
			} else {
				// uni.navigateTo({
				// 	url: '../../views/login/enterpriseInfo'
				// });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.tip {
	width: 690rpx;
	margin: 60rpx auto;
	font-size: 28rpx;
	color: #888888;
	.borderleft {
		width: 15rpx;
		height: 40rpx;
		background: $color;
		margin-right: 30rpx;
	}
}
.loginBox {
	.cell {
		height: 90rpx;
		margin: 0 54rpx 30rpx 54rpx;
		border-bottom: solid 1rpx $bcolor;
		font-size: 32rpx;

		.requierText {
			display: inline-block;
			width: 10rpx;
			color: #f43f3b;
			margin-right: 10rpx;
		}

		.label {
			width: 240rpx;
			margin-right: 10rpx;
			text-align: ri;
		}

		input {
			height: 60rpx;
		}
		.textA {
			width: 100%;
			height: 100%;
		}
	}

	.login {
		font-size: 32rpx;
		margin: 60rpx 54rpx 30rpx 54rpx;
		height: 96rpx;
		color: #fff;
		background-image: linear-gradient(to left, $color, #00aaff);
	}
}
</style>
